<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./icon/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./alibaba/iconfont/iconfont.css" />
    <link rel="stylesheet" href="./swiper/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./less/css/buyCar.css" />
    <title>Document</title>
    <script src="./vue/js/vue.js"></script>
    <script src="./axios/axios.js"></script>
</head>
<body>
    <div id="buyCar_box1">
        <div id="index_box1" class="container">
            <!-- 头部搜索框 -->
            <form class="form-horizontal" role="form">
                <div class="index_box_div">
                  <div class="index_box_div_top">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <span class="icon iconfont">&#x10100;</span>
                        </span>
                        <input type="text" class="form-control" placeholder="搜索车型">
                    </div>
                  </div>
                  <div class="index_box_div_bottom" >
                    <span class="icon iconfont icon-xiaoxi"></span>
                  </div>
                </div>
            </form>
            <!-- <img class="img-swipar" src="images/banner@3x.jpg"/> -->
            <div class="img-swipar swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                    <img rel="prefetch" src="images/banner@3x.jpg" />
                    </div>
                    <div class="swiper-slide">
                    <img rel="prefetch" src="images/banner@3x.jpg" />
                    </div>
                    <div class="swiper-slide">
                    <img rel="prefetch" src="images/banner@3x.jpg" />
                    </div>
                    <div class="swiper-slide">
                    <img rel="prefetch" src="images/banner@3x.jpg" />
                    </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>
    
    <div id="index_box3">
        <div class="index_box3_box_content">
            <div class="iconbox text-center">
                <div class="iconbox_icon1">
                    <span class="icon iconfont icon-ershouche"></span>
                </div>
                <div class="tc text-center">超值好车</div>
            </div>
            <div class="iconbox text-center">
                <div class="iconbox_icon2">
                    <span class="icon iconfont icon-maiche"></span>
                </div>
                <div class="tc text-center">VR看车</div>
            </div>
            <div class="iconbox text-center">
                <div class="iconbox_icon3">
                    <span class="icon iconfont icon-yinhangka "></span>
                </div>
                <div class="tc text-center">热销SUV</div>
            </div>
            <div class="iconbox text-center" >
                <div class="iconbox_icon4">
                    <span class="icon iconfont icon-jisuanqi"></span>
                </div>
                <div class="tc text-center">计算器</div>
            </div>
        </div>
    </div>
    <div id="buyCar_root">
        <div id="buyCar_box3">
            <div class="select">
                <select v-model="formData.selectSort" @change="changeCarArraysForSort">
                  <option v-for="item,index in selectOptions[0]['sort']" :value="item" :key="index">{{item}}</option>
                </select>
              </div>
              <div class="select">
                <select v-model="formData.selectBrand" @change="changeCarArraysForBrand">
                  <option v-for="item,index in getBrandByObject" :value="item" :key="index" >{{item}}</option>
                </select>
              </div>
              <div class="select">
                <select v-model="formData.slectVehicleSeries" @change="changeCarArraysForVehicleSeries">
                  <option v-for="item,index in getVehicleSeriesArrayBySelectBrand" :value="item" :key="index">{{item}}</option>
                </select>
              </div>
              <div id="sel_search" class="select" @click="showScreen">
                <div>筛选</div>
              </div>
        </div>
        <div id="buyCar_box4" v-show="showBuyCarBox4">
            <div @click="showScreen" style="width: 100%;height: 35vw;position: absolute;top: 0;"></div>
            <div class="bCb4_content">
                <div class="bCb4_content_screen">全部筛选</div>
                <div style="width: 100%;height: 2vw;margin-top: 12vw;"></div>
                <!-- <div class="bCb4_content_center">
                    <div class="bCb4_content_center_title">车龄</div>
                    <div class="bCb4_content_center_options">
                        <div v-for="item,index in carScreen.carAgeArrays" :key="index">
                            <input type="radio" :id="item.id" name="carAge" :value="item.carAgeText" v-model="formData.selectCarAge"/>
                            <label :for="item.id">{{item.carAgeText}}</label>
                        </div>
                    </div>
                </div> -->
                <div class="bCb4_content_center">
                    <div class="bCb4_content_center_title">价格</div>
                    <div class="bCb4_content_center_options">
                        <div v-for="item,index in carScreen.carMoneyArrays" :key="index">
                            <input type="radio" :id="item.id" name="carMoney" :value="item.carMoneyTest" v-model="formData.selectCarMoney" />
                            <label :for="item.id">{{item.carMoneyTest}}</label>
                        </div>
                    </div>
                </div>
                <div class="bCb4_content_center">
                    <div class="bCb4_content_center_title">变速箱</div>
                    <div class="bCb4_content_center_options">
                        <div v-for="item,index in carScreen.transmissionArrays" :key="index">
                            <input type="radio" :id="item.id" name="Transmission" :value="item.transmissionText" v-model="formData.selectTransmission" />
                            <label :for="item.id">{{item.transmissionText}}</label>
                        </div>
                    </div>
                </div>
                <div class="bCb4_content_center">
                    <div class="bCb4_content_center_title">燃油类型</div>
                    <div class="bCb4_content_center_options">
                        <div v-for="item,index in carScreen.gasArrays">
                            <input type="radio" :id="item.id" name="gas" :value="item.gasText" v-model="formData.selectGas" />
                            <label :for="item.id">{{item.gasText}}</label>
                        </div>
                    </div>
                </div>
                <div class="bCb4_content_btn bCb4_content_center">
                    <div class="left"  @click="resetScreen">重置</div>
                    <div class="right" @click="subScreen">确定</div>
                </div>
            </div>
        </div>
    

        
        <div class="car_list">
            <div class="car_list_cot">
                <div class="car_list_all" >
                    <span class="img_timg">
                        <img rel="prefetch" src="images/buyCar/bc_l1.png"/>
                    </span>
                    <div>
                        <b>三厢轿车</b>
                    </div>
                </div>
                <div class="car_list_all" >
                    <span class="img_timg">
                        <img rel="prefetch" src="images/buyCar/bc_l2.png"/>
                    </span>
                    <div>
                        <b>SUV</b>
                    </div>
                </div>
                <div class="car_list_all" >
                    <span class="img_timg">
                        <img rel="prefetch" src="images/buyCar/bc_l3.png"/>
                    </span>
                    <div>
                        <b>两厢轿车</b>
                    </div>
                </div>
            </div>
        </div>

        <div id="buyCar_content" class="container">
            <div class="class_group" v-for="item,index in carArrays"  @click="backToCarDetails(item.puid)">
                <img rel="prefetch" :src="item.thumb_img" >
                <p>{{item.title}}</p>
                <span class="div_span1 gzfont" v-html="'厂商指导价：'+item.carCNY"></span>
                <span class="div_span2 gzfont">
                    <span>首付</span>
                    <span class="dst gzfont" v-html="item.first_pay" ref="cont"></span>
                </span>
            </div>
        </div>
        
    </div>

    <div id="index_box9">
        <div class="index_box9_content">
            <div class="box text-center" @click="jump('首页')">
                <span class="icon iconfont icon-shouye"></span>
                <div class="text-center" >首页</div>
            </div>
            <div  style="color:#249FF4" class="box text-center" @click="jump('买车')">
                <span class="icon iconfont icon-maiche"></span>
                <div class="text-center" >买车</div>
            </div>
            <div class="box text-center" @click="jump('租车')">
                <span class="icon iconfont icon-zuche"></span>
                <div class="text-center" >租车</div>
            </div>
            <div class="box text-center" @click="jump('卖车')">
                <span class="icon iconfont icon-iconfontzhizuobiaozhun023121"></span>
                <div class="text-center" >卖车</div>
            </div>
            <div class="box text-center" @click="jump('我的')">
                <span class="icon iconfont icon-geren"></span>
                <div class="text-center" >我的</div>
            </div>
        </div>
    </div>
    
    <script src="./swiper/js/swiper-bundle.min.js"></script>
    <script src="./js/buyCar.js"></script>
    <script type="text/javascript">
        Vue.config.productionTip = false;

        //#region buyCar_root交互功能
        new Vue({
            el:'#buyCar_root',
            data(){
                return{
                    showBuyCarBox4:false,
                    carArrays:'',
                    carScreen:{
                        carAgeArrays:[],
                        carMoneyArrays:[],
                        transmissionArrays:[],
                        gasArrays:[],
                    },
                    formData:{
                        selectSort:'智能排序',
                        selectBrand:'品牌',
                        slectVehicleSeries:'车系',
                        selectCarAge:'',
                        selectCarMoney:'',
                        selectTransmission:'',
                        selectGas:'',
                    },
                    selectOptions:[
                        {sort:['智能排序','价格降序','价格升序']},
                        {brand:[
                            {'品牌':['车系']},
                            {'大众':['车系','速腾','朗逸','POLO']},
                            {'本田':['车系','雅阁','思域','飞度']},
                            {'宝马':['车系','3系','5系','X1']},
                            {'奔驰':['车系','C级','E级','GLC级']}
                        ]},
                    ]
                }
            },
            computed:{
                getBrandByObject(){
                    return this.selectOptions[1]['brand'].map(function(item){
                        // console.log(Object.keys(item)[0])
                        return Object.keys(item)[0];
                    })
                },
                getVehicleSeriesArrayBySelectBrand(){
                    let arrays = []
                    Object.keys(this.selectOptions[1]['brand']).map(i=>{
                        if(Object.keys(this.selectOptions[1]['brand'][i])[0]===this.formData.selectBrand){
                            let tt = Object.keys(this.selectOptions[1]['brand'][i][this.formData.selectBrand])
                            for(let j=0;j<tt.length;j++){
                                arrays.push(this.selectOptions[1]['brand'][i][this.formData.selectBrand][tt[j]])
                                
                            }
                        }
                    })
                    // console.log('arrays:',arrays)
                    return arrays
                },
            },
            methods:{

                //#region  筛选功能的事件

                // 点击筛选按钮
                showScreen(){
                    // console.log(this.showBuyCarBox4)
                    this.showBuyCarBox4 = !this.showBuyCarBox4;
                },

                // 点击筛选中的确定按钮
                subScreen(){
                    this.showBuyCarBox4 = !this.showBuyCarBox4;
                },

                // 点击筛选中的重置按钮
                resetScreen(){
                    this.formData.selectCarAge = ''
                    this.formData.selectCarMoney = ''
                    this.formData.selectTransmission = ''
                    this.formData.selectGas = ''
                },

                //#endregion

                // 智能排序
                changeCarArraysForSort(){
                    // console.log('改变排序',this.formData.selectSort)
                    if(this.formData.selectSort==='价格降序'){
                        this.carArrays.sort(function(a,b){
                            // console.log(a,b)
                            return b.rmb_price - a.rmb_price
                        })
                    }else if(this.formData.selectSort === '价格升序'){
                        this.carArrays.sort(function(a,b){
                            // console.log(a,b)
                            return a.rmb_price - b.rmb_price 
                        })
                    }
                },

                // 品牌排序
                changeCarArraysForBrand(){
                    this.formData.slectVehicleSeries = '车系'
                    console.log('按品牌进行排序',this.formData)
                    // 品牌 大众 本田 宝马 奔驰
                    if(this.formData.selectBrand==='品牌'){
                        url='./json/data/0-0.json'
                    }else if(this.formData.selectBrand === '大众'){
                        url='./json/data/1-0.json'
                    }else if(this.formData.selectBrand === '本田'){
                        url='./json/data/2-0.json'
                    }else if(this.formData.selectBrand === '宝马'){
                        url='./json/data/3-0.json'
                    }else if(this.formData.selectBrand === '奔驰'){
                        url='./json/data/4-0.json'
                    }else{
                        url='./json/data/0-0.json'
                    }
                    axios.get(url).then(response=>{
                        this.carArrays = response.data['data']['postList'].map(function(item){
                            return{
                                clue_id:item.clue_id,
                                puid:item.puid,
                                thumb_img:item.thumb_img,
                                title:item.title,
                                carCount:4.08,
                                carCNY:item.price,
                                first_pay:item.first_pay,
                                rmb_price:JSON.parse(item.service_tracking_info)['price'],
                            }
                        })
                    })
                },
                //车系排序
                changeCarArraysForVehicleSeries(event){
                    // console.log('value:',event.target.value)
                    // 品牌 大众 本田 宝马 奔驰
                    // console.log('车系选择',this.formData.slectVehicleSeries)
                    if(this.formData.selectBrand==='品牌'&&this.formData.slectVehicleSeries==='车系'){
                        url='./json/data/0-0.json'
                    }else if(this.formData.selectBrand === "大众"){
                        if(this.formData.slectVehicleSeries === '车系'){
                            url='./json/data/1-0.json'
                        }else if(this.formData.slectVehicleSeries === '速腾'){
                            url='./json/data/1-1.json'
                        }else if(this.formData.slectVehicleSeries === '朗逸'){
                            url='./json/data/1-2.json'
                        }else if(this.formData.slectVehicleSeries === 'POLO'){
                            url='./json/data/1-3.json'
                        }else{
                            url='./json/data/1-0.json'
                        }
                    }else if(this.formData.selectBrand === '本田'){
                        if(this.formData.slectVehicleSeries === '车系'){
                            url='./json/data/2-0.json'
                        }else if(this.formData.slectVehicleSeries === '雅阁'){
                            url='./json/data/2-1.json'
                        }else if(this.formData.slectVehicleSeries === '思域'){
                            url='./json/data/2-2.json'
                        }else if(this.formData.slectVehicleSeries === '飞度'){
                            url='./json/data/2-3.json'
                        }else{
                            url='./json/data/2-0.json'
                        }
                    }else if(this.formData.selectBrand==='宝马'){
                        // {'宝马':['车系','3系','5系','X1']},
                        if(this.formData.slectVehicleSeries==='车系'){
                            url='./json/data/3-0.json'
                        }else if(this.formData.slectVehicleSeries==='3系'){
                            url='./json/data/3-1.json'
                        }else if(this.formData.slectVehicleSeries==='5系'){
                            url='./json/data/3-2.json'
                        }else if(this.formData.slectVehicleSeries==='X1'){
                            url='./json/data/3-3.json'
                        }else{
                            url='./json/data/3-0.json'
                        }
                    }else if(this.formData.selectBrand==='奔驰'){
                        // {'奔驰':['车系','C级','E级','GLC级']}
                        if(this.formData.slectVehicleSeries==='车系'){
                            url='./json/data/4-0.json'
                        }else if(this.formData.slectVehicleSeries==='C级'){
                            url='./json/data/4-1.json'
                        }else if(this.formData/slectVehicleSeries==='E级'){
                            url='./json/data/4-2.json'
                        }else if(this.formData.slectVehicleSeries==='GLC级'){
                            url='./json/data/4-3.json'
                        }else{
                            url='./json/data/4-0.json'
                        }
                    }else{
                        url='./json/data/0-0.json'
                    }
                    axios.get(url).then(response=>{
                        this.carArrays = response.data['data']['postList'].map(function(item){
                            return{
                                clue_id:item.clue_id,
                                puid:item.puid,
                                thumb_img:item.thumb_img,
                                title:item.title,
                                carCount:4.08,
                                carCNY:item.price,
                                first_pay:item.first_pay,
                                rmb_price:JSON.parse(item.service_tracking_info)['price'],
                            }
                        })
                    })
                },
                backToCarDetails(puuid){
                    // window.location.href='./carDateaisl.html'
                    // console.log('puid:',puuid)
                    window.location.href=`./carDateaisl.html?puuid=${puuid}&jsonid=0-0`
                }
            },
            mounted(){

                //#region 挂载，访问本地json数据中筛选功能中的选项
                axios.get('./json/carScreen.json')
                .then(response=>{
                    //#region 车龄
                    // console.log((response.data))
                    this.carScreen.carAgeArrays = Object.keys(response.data.carAge[0]).map(key => {
                        return {
                            id:key,
                            carAgeText:response.data.carAge[0][key]
                        }
                    })
                    // console.log(this.carScreen.carAgeArrays)
                    //#endregion

                    //#region 价格
                    this.carScreen.carMoneyArrays = Object.keys(response.data.carMoney[0]).map(key => {
                        return {
                            id:key,
                            carMoneyTest:response.data.carMoney[0][key]
                        }
                    })
                    // console.log(this.carScreen.carMoneyArrays)
                    //#endregion

                    //#region 变速箱
                    this.carScreen.transmissionArrays = Object.keys(response.data.transmission[0]).map(key => {
                        return {
                            id:key,
                            transmissionText:response.data.transmission[0][key]
                        }
                    })
                    // console.log(this.carScreen.transmissionArrays)
                    //#endregion

                    //#region 燃油类型
                    this.carScreen.gasArrays = Object.keys(response.data.gas[0]).map(key => {
                        return {
                            id:key,
                            gasText:response.data.gas[0][key]
                        }
                    })
                    // console.log(this.carScreen.gasArrays)
                    //#endregion


                }).catch(error=>{
                    console.log(error)
                })
                //#endregion
                // console.log(this.selectOptions[1]['brand'])
                // console.log(Object.keys(this.selectOptions[1]['brand']))

                
                axios.get('./json/data/0-0.json').then(response=>{
                    // console.log(response.data['data']['postList'])
                    this.carArrays = response.data['data']['postList'].map(function(item){
                        // console.log(JSON.parse(item.service_tracking_info)['price'])
                        return{
                            clue_id:item.clue_id,
                            puid:item.puid,
                            thumb_img:item.thumb_img,
                            title:item.title,
                            carCount:4.08,
                            carCNY:item.price,
                            first_pay:item.first_pay,
                            rmb_price:JSON.parse(item.service_tracking_info)['price'],
                        }
                    })
                    // console.log(this.carArrays)
                    // this.carArrays.sort(function(a,b){
                    //     // console.log(a,b)
                    //     return a.rmb_price - b.rmb_price
                    // })
                    // console.log(this.carArrays)
                })
            }
        })
        //#endregion

        //#region index_box9交互功能
        new Vue({
            el:"#index_box9",
            methods:{
                jump(context){
                    console.log(context)
                    if(context==='首页'){
                        window.location.href='./index.html'
                    }else if(context==='买车'){
                        window.location.href='./buyCar.html'
                    }else if(context==='租车'){
                        window.location.href='./rentCar.html'
                    }else if(context==='卖车'){
                        window.location.href='./SellCar.html'
                    }else if(context==='我的'){
                        window.location.href='./PersonalCenter.html'
                    }
                }
            }
        })
        //#endregion

    </script>
</body>
</html>